<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02-随机抽奖-数组长度</title>
</head>

<body>
  <!-- 🚨在网页中准备一个按钮 -->
  <button>点击随机抽奖</button>
  <script>
    // 需求分析
    //   1. 准备数组，存放多条数据的集合
    //   2. 通过索引取出一个观众
    //   3. 随机数，0 ~ 4.999999
    //   4. 小数取整
    //   5. 获取随机观众

    // 函数基本结构：
    //  函数定义：
    //    function 函数名称() { }
    //  函数调用：
    //    函数名称()

    // 查找文档中的按钮
    var btn = document.querySelector('button')

    // 给按钮添加点击事件
    btn.addEventListener('click', function () {
      // 用户点击时：调用随机抽奖功能
      getRamdom()
    })

    // 封装了随机抽奖功能
    function getRamdom() {
      // 准备数组
      //   索引      0       1       2        3         4
      var heros = ['悟空', '八戒', '沙师弟', '白龙马', '玄奘', '刘备', '关羽', '张飞']

      // 准备随机数
      //   Math.random()      生成 0~0.99999 的随机小数
      //   heros.length       数组的长度(更灵活的程序)
      var suiji = Math.random() * heros.length

      // 随机索引：对随机小数进行取整
      //   Math.floor(小数)   对小数进行取整  
      var suoyin = Math.floor(suiji)

      // 页面输出：提示信息
      document.write('🎉恭喜这位幸运观众：')

      // 页面输出：随机的观众
      document.write(heros[suoyin])
    }




  </script>
</body>

</html>